<template>
	<view class="container">
		<!-- 顶部统计卡片 -->
		<view class="stats-section">
			<view class="stats-grid">
				<view class="stat-card primary" @click="navigateTo('/pages/supplier/verify/list?status=pending')">
					<view class="stat-content">
						<view class="stat-icon-wrapper">
							<uv-icon name="error-circle" size="36" color="#fff"></uv-icon>
						</view>
						<view class="stat-text">
							<text class="stat-value">{{screenData.waitVerifiedNum || 0}}</text>
							<text class="stat-label">待核实库存</text>
						</view>
					</view>
					<view class="stat-footer">
						<text class="stat-tip">点击查看详情</text>
						<uv-icon name="arrow-right" size="20" color="#fff"></uv-icon>
					</view>
				</view>

				<view class="stat-card warning" @click="navigateTo('/pages/supplier/order/list?status=2')">
					<view class="stat-content">
						<view class="stat-icon-wrapper">
							<uv-icon name="car" size="36" color="#fff"></uv-icon>
						</view>
						<view class="stat-text">
							<text class="stat-value">{{screenData.waitDeliveryNum || 0}}</text>
							<text class="stat-label">待发货订单</text>
						</view>
					</view>
					<view class="stat-footer">
						<text class="stat-tip">点击查看详情</text>
						<uv-icon name="arrow-right" size="20" color="#fff"></uv-icon>
					</view>
				</view>

				<view class="stat-card success" @click="navigateTo('/pages/supplier/statement/list?status=pending')">
					<view class="stat-content">
						<view class="stat-icon-wrapper">
							<uv-icon name="account" size="36" color="#fff"></uv-icon>
						</view>
						<view class="stat-text">
							<text class="stat-value">{{screenData.waitStatementNum || 0}}</text>
							<text class="stat-label">待对账</text>
						</view>
					</view>
					<view class="stat-footer">
						<text class="stat-tip">点击查看详情</text>
						<uv-icon name="arrow-right" size="20" color="#fff"></uv-icon>
					</view>
				</view>
			</view>
		</view>

		<!-- 核心指标 -->
		<view class="custom-card metrics-section">
			<view class="section-title">核心指标</view>
			<view class="metrics-grid">
				<view class="metric-item" v-for="(metric, index) in metrics" :key="index">
					<text class="metric-value">{{metric.value}}</text>
					<text class="metric-label">{{metric.label}}</text>
				</view>
			</view>
		</view>

		<!-- 快捷操作 -->
		<view class="custom-card quick-actions">
			<view class="section-title">快捷操作</view>
			<view class="actions-grid">
				<view class="action-item" v-for="action in quickActions" :key="action.text"
					@click="navigateTo(action.path)">
					<view class="action-icon" :style="{backgroundColor: action.bgColor}">
						<uv-icon :name="action.icon" size="24" :color="action.color"></uv-icon>
					</view>
					<text class="action-label">{{action.text}}</text>
				</view>
			</view>
		</view>

		<!-- 商品信息 -->
		<view class="custom-card goods-section">
			<view class="section-title">商品信息</view>
			<view class="goods-grid">
				<view class="goods-item" v-for="goods in goodsInfo" :key="goods.label">
					<text class="goods-value">{{goods.value}}</text>
					<text class="goods-label">{{goods.label}}</text>
				</view>
			</view>
		</view>

		<!-- 加载状态 -->
		<uv-loading-page :loading="loading" loading-text="加载中..." bgColor="rgba(0, 0, 0, 0.3)"></uv-loading-page>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: true,
				screenData: {
					waitVerifiedNum: 0,
					totalVerifiedNum: 0,
					goodsNum: 0,
					goodsVerifyErrorNum: 0,
					waitDeliveryNum: 0,
					totalOrderNum: 0,
					waitStatementNum: 0,
					totalStatementNum: 0,
					totalPayPrice: 0,
					totalPayOrderNum: 0
				},
				quickActions: [{
						icon: 'search',
						color: '#2979ff',
						bgColor: '#ecf5ff',
						text: '库存核实',
						path: '/pages/supplier/verify/list'
					},
					{
						icon: 'order',
						color: '#19be6b',
						bgColor: '#f0f9f4',
						text: '订单管理',
						path: '/pages/supplier/order/list'
					},
					{
						icon: 'account',
						color: '#ff7900',
						bgColor: '#fdf6ec',
						text: '对账管理',
						path: '/pages/supplier/statement/list'
					},
					{
						icon: 'bag',
						color: '#e54d42',
						bgColor: '#fef0f0',
						text: '商品管理',
						path: '/pages/supplier/goods/list'
					}
				]
			};
		},
		computed: {
			// 核心指标数据
			metrics() {
				return [{
						value: this.screenData.totalOrderNum || 0,
						label: '总订单数'
					},
					{
						value: this.screenData.totalVerifiedNum || 0,
						label: '总核实数'
					},
					{
						value: this.screenData.totalStatementNum || 0,
						label: '总对账数'
					},
					{
						value: '¥' + (this.screenData.totalPayPrice || 0),
						label: '销售金额'
					}
				];
			},
			// 商品信息数据
			goodsInfo() {
				return [{
						value: this.screenData.goodsNum || 0,
						label: '商品总数'
					},
					{
						value: this.screenData.goodsVerifyErrorNum || 0,
						label: '核实异常'
					}
				];
			}
		},
		onShow() {
			// 页面显示时刷新数据
			this.loadData();
		},
		onPullDownRefresh() {
			// 下拉刷新
			this.loadData().finally(() => {
				uni.stopPullDownRefresh();
			});
		},
		methods: {
			loadData() {
				return uni.$uv.http.get('/Supplier/getScreenData', {
					params: {}
				}).then(res => {
					if (res.res.code === 1) {
						this.screenData = res.res.data;
					} else {
						setTimeout(() => {
							uni.navigateBack();
						}, 1500)
					}
				}).catch(error => {
					console.log('error', error);
					this.$wanlshop.msg('获取失败，请稍后重试');
				}).finally(() => {
					this.loading = false;
				});
			},
			navigateTo(url) {
				this.$wanlshop.to(url)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx;
		background-color: #f5f7fa;
		min-height: 100vh;
		box-sizing: border-box;
	}

	/* 统计卡片区域 */
	.stats-section {
		margin-bottom: 30rpx;

		.stats-grid {
			display: flex;
			flex-direction: column;
			gap: 20rpx;

			.stat-card {
				border-radius: 20rpx;
				padding: 30rpx;
				color: #fff;
				position: relative;
				box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.12);
				transition: all 0.3s ease;

				&:active {
					transform: translateY(4rpx);
					box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
				}

				&.primary {
					background: linear-gradient(135deg, #4a90e2, #5ba0ff);
				}

				&.warning {
					background: linear-gradient(135deg, #f7b500, #ffc533);
				}

				&.success {
					background: linear-gradient(135deg, #34c759, #5dd879);
				}

				.stat-content {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;

					.stat-icon-wrapper {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						background: rgba(255, 255, 255, 0.2);
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 25rpx;
					}

					.stat-text {
						flex: 1;
						display: flex;
						flex-direction: column;
					}

					.stat-value {
						font-size: 52rpx;
						font-weight: bold;
						line-height: 1.2;
						margin-bottom: 8rpx;
					}

					.stat-label {
						font-size: 28rpx;
						opacity: 0.9;
					}
				}

				.stat-footer {
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-top: 1rpx solid rgba(255, 255, 255, 0.2);
					padding-top: 20rpx;

					.stat-tip {
						font-size: 24rpx;
						opacity: 0.8;
					}
				}
			}
		}
	}

	.custom-card {
		background: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 25rpx;
		position: relative;
		padding-left: 20rpx;

		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 8rpx;
			height: 32rpx;
			width: 6rpx;
			background-color: #2979ff;
			border-radius: 3rpx;
		}
	}

	/* 核心指标样式 */
	.metrics-section {
		.metrics-grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 25rpx;

			.metric-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 35rpx 20rpx;
				background: #f8fafc;
				border-radius: 16rpx;
				transition: all 0.3s;

				&:active {
					background: #f0f4f8;
				}

				.metric-value {
					font-size: 36rpx;
					font-weight: bold;
					color: #4a90e2;
					margin-bottom: 12rpx;
				}

				.metric-label {
					font-size: 26rpx;
					color: #666;
					text-align: center;
				}
			}
		}
	}

	/* 快捷操作样式 */
	.quick-actions {
		.actions-grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 35rpx;

			.action-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 35rpx 0;
				border-radius: 16rpx;
				transition: all 0.3s;

				&:active {
					background-color: #f5f5f5;
					transform: scale(0.98);
				}

				.action-icon {
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 20rpx;
					transition: all 0.3s;
				}

				.action-label {
					font-size: 28rpx;
					color: #333;
					text-align: center;
					font-weight: 500;
				}
			}
		}
	}

	/* 商品信息样式 */
	.goods-section {
		.goods-grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 25rpx;

			.goods-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 35rpx 20rpx;
				background: #f8fafc;
				border-radius: 16rpx;
				transition: all 0.3s;

				&:active {
					background: #f0f4f8;
				}

				.goods-value {
					font-size: 36rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 12rpx;
				}

				.goods-label {
					font-size: 26rpx;
					color: #666;
				}
			}
		}
	}
</style>